import { Component, ReactNode } from "react";
import { View, Text, Image } from "@tarojs/components";
import i1 from "./images/i1.png";
import i2 from "./images/i2.png";
import i3 from "./images/i3.png";
import i4 from "./images/i4.png";
import i5 from "./images/i5.png";
import Taro from "@tarojs/taro";
import { AtAvatar, AtButton } from "taro-ui";
import avatar from "../../assets/avatar.png";
import { isEmpty } from "../../utils/kit";
import Req from "../../utils/request";
import { removeToken,getInfo } from "../../utils/auth";
import "./index.scss";
export default class Home extends Component {
  state = {
    list: [
      {
        icon: i1,
        text: "基本资料",
        path: "/pages/my-info/index",
      },
      {
        icon: i2,
        text: "通知公告",
        path:"/pages/notice/index"
      },
      {
        icon: i2,
        text: "我的供应商",
        path:"/pages/payee/index"
      }
    ],
    user:getInfo() ?? {}
  };
  componentDidMount(): void {

  }
  goToPath = (path: string) => {
    if (!isEmpty(path)) {
      Taro.navigateTo({
        url: path,
      });
    }
  };
  goToMyInfo = () => {
    Taro.navigateTo({
      url: "/pages/my-info/index",
    });
  };
  onLogout = () => {
    removeToken();
    Taro.navigateTo({
      url:'/pages/login/index'
    })
  }
  componentDidShow(){
    this.setState({
      user:getInfo() ?? {}
    })
  }
  render(): ReactNode {
    const {user} = this.state;
    return (
      <View className="home-wrapper">
        <View className="top-header">
          <AtAvatar image={avatar} circle className="t-h-avatar" />
          <View className="t-h-info">
            <Text className="t-h-t1">{user.userName ?? '/'}</Text>
            <View className="t-h-box">
              <Image src={i5} className="t-h-loc" />
              <Text className="t-h-t2">
                {user?.company?.address ?? "/"}
              </Text>
            </View>
          </View>
        </View>
        <View className="main-box">
          {this.state.list.map((item: any, index) => (
            <View
              onClick={() => {
                this.goToPath(item?.path);
              }}
              key={index}
              hoverClass="hover-link-btn"
              className="home-link-btn"
            >
              <Image mode="aspectFit" className="h-l-img" src={item.icon} />
              <Text className="h-l-text">{item.text}</Text>
            </View>
          ))}
        </View>

        <AtButton
          className="home-login-btn primary-btn-color"
          circle
          type="primary"
          onClick={this.onLogout}
        >
          退出登录
        </AtButton>
      </View>
    );
  }
}
